import { View, Text, Image } from '@tarojs/components'
import get from 'lodash-es/get'
import Taro, { TabBarItem } from '@tarojs/taro'
import AddSvg from '@/assets/images/add_white.svg'
import WorkbenchSvg from '@/assets/images/workbench.svg'
import WorkbenchActivedSvg from '@/assets/images/workbench_actived.svg'
import TaskSvg from '@/assets/images/task.svg';
import TaskActivedSvg from '@/assets/images/task_actived.svg';
import SamplingSvg from '@/assets/images/sampling.svg'
import SamplingActivedSvg from '@/assets/images/sampling_actived.svg'
import PersonelSvg from '@/assets/images/personel.svg'
import PersonelActivedSvg from '@/assets/images/personel_actived.svg'
import { useEffect } from 'react'

import './index.less'

const tabBarList = getTabbarList()

const tabBarIconMaps = {
  'pages/index/index': [WorkbenchSvg, WorkbenchActivedSvg],
  'pages/taskList/index': [TaskSvg, TaskActivedSvg],
  'pages/sampling/index': [SamplingSvg, SamplingActivedSvg],
  'pages/personel/index': [PersonelSvg, PersonelActivedSvg],
}

function getTabbarList() {
  const app = Taro.getApp();
  return get(app, 'config.tabBar.list', []) as TabBarItem[]
}

export default function BasicTabbar() {

  const pathname = get(Taro.Current, 'page.route');

  // useEffect(() => {
  //   console.log(222222, Taro.Current.page?.router)
  // }, [])

  function onTabBarClick(item: TabBarItem) {
    Taro.switchTab({ url: '/' + item.pagePath })
  }

  function renderTabItem(item: TabBarItem, index: number) {
    if (index === 2) {
      return (
        <View key={index} className='basicTabbarItem'>
          <View className='add'>
            <Image src={AddSvg} />
          </View>
          <View className='icon'></View>
          <Text className='text' style={{ color: '#999' }}>{item.text}</Text>
        </View>
      )
    }
    console.log('pathname ', pathname)
    const iconpath = pathname === item.pagePath ? tabBarIconMaps[item.pagePath][1] : tabBarIconMaps[item.pagePath][0];
    return (
      <View key={index} className='basicTabbarItem' onClick={() => onTabBarClick(item)}>
        <View className='icon'>
          <Image src={iconpath} />
        </View>
        <Text className='text' style={{ color: pathname === item.pagePath ? 'var(--nutui-color-primary)' : '#999' }}>{item.text}</Text>
      </View>
    )
  }

  return (
    <View className='basicTabbar'>
      {
        tabBarList.map((item, index) => renderTabItem(item, index))
      }
    </View>
  )
}
